<script setup lang="ts">
import { shallowRef } from 'vue';

import Child01 from '../components/项目四/Child01.vue';
import Child02 from '../components/项目四/Child02.vue';
import Child03 from "../components/项目四/Child03.vue";

const myComponent = shallowRef(Child01);

function changeComponent(idx){
  if(idx == 1){
    myComponent.value = Child01;
  }else if(idx == 2){
    myComponent.value = Child02;
  }else{
    myComponent.value = Child03;
  }
}

</script>

<template>
  <KeepAlive>
<component :is="myComponent"></component>
</KeepAlive>
  <input type="button" value="切换Child01组件" @click="changeComponent(1)"></input>
  <input type="button" value="切换Child02组件" @click="changeComponent(2)"></input>
  <input type="button" value="切换Child03组件" @click="changeComponent(3)"></input>
</template>